* {
  margin: 0;
  padding: 0;
}

/* 如果浏览器支持自动切换黑暗模式特性 */
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #323336 !important;
    --header-btn-color: rgba(24, 144, 255, .8) !important;;
    --item-border: #333 !important;;
    --item-border-hover: rgba(24, 144, 255, .32) !important;;
    --item-bg: #222 !important;;
    --item-shadow: rgba(24, 144, 255, .32) !important;;
    --header-font: #d2d2d2 !important;;
    --header-bg-hover: rgba(34, 34, 34, 0.42) !important;;
    --item-title: #dedede !important;;
    --item-desc: #dfdfdf !important;;
    --folder-botton: transparent !important;;
  }
}
:root, [color-mode=light] {
  --body-bg: #fff;
  --header-btn-color: rgba(24, 144, 255, .8);
  --item-border: #eee;
  --item-border-hover: rgba(24, 144, 255, .32);
  --item-bg: #fff;
  --item-shadow: rgba(24, 144, 255, .32);
  --header-font: #666;
  --header-bg-hover: rgba(24, 144, 255, .12);
  --item-title: #333;
  --item-desc: #777;
  --folder-botton: #eee;
}
[color-mode=dark] {
  --body-bg: #323336;
  --header-btn-color: rgba(24, 144, 255, .8);
  --item-border: #333;
  --item-border-hover: rgba(24, 144, 255, .32);
  --item-bg: #222;
  --item-shadow: rgba(24, 144, 255, .32);
  --header-font: #d2d2d2;
  --header-bg-hover: rgba(34, 34, 34, 0.42);
  --item-title: #dedede;
  --item-desc: #dfdfdf;
  --folder-botton: transparent;
}

body {
  overflow-y: scroll;
  background-color: var(--body-bg);
  font-family: system-ui, "PingFang SC", STHeiti, sans-serif;
  font-size: 75%;
}

#app {
  padding: 48px 0;
  .container {
    max-width: 1280px;
    margin: 0 auto;
  }
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    font-size: 14px;
  }
  .unclick {
    pointer-events: none;
  }
  .click {
    pointer-events: auto;
  }
}
